<template>
	<a-select
		v-bind="$attrs"
		style="width: 100%"
		:options="userList"
		:fieldNames="{ label: 'name', value: 'id', options: 'options' }"
		:filter-option="
			(input, option) => {
				if (option && option.name) {
					return option.name.indexOf(input) >= 0
				}
			}
		"
	>
		<template #dropdownRender="{ menuNode: menu }">
			<!--自定义内容-->
			<a-row :gutter="24" @mousedown="(e) => e.preventDefault()">
				<a-col :span="14">
					<!--树形数据-->
					<a-tree
						:height="233"
						:treeData="orgTree"
						@select="selT"
						:field-names="{
							children: 'children',
							title: 'name',
							key: 'id'
						}"
					>
					</a-tree>
				</a-col>
				<a-col :span="10">
					<v-nodes :vnodes="menu" />
				</a-col>
			</a-row>
		</template>
	</a-select>
</template>

<script setup name="userSelector">
	import bizUserApi from '@/api/biz/bizUserApi'

	const VNodes = (_, { attrs }) => {
		return attrs.vnodes
	}

	let orgTree = ref([])
	let userList = ref([])

	bizUserApi.userOrgTreeSelector().then((res) => {
		orgTree.value = res
	})
	const params = {
		pageNo: 1,
		pageSize: -1
	}
	bizUserApi.userPage(params).then((res) => {
		userList.value = res.records
	})

	// 选择树的时候执行
	const selT = (key, event) => {
		bizUserApi
			.userPage({
				pageNo: 1,
				pageSize: -1,
				orgId: key.toString()
			})
			.then((res) => {
				userList.value = res.records
			})
	}
</script>

<style lang="less"></style>
